<template>
    <div class="page-container coach-content">
        <coach-top></coach-top>
        <div class="car-info">
            <div>
                <!-- -->
                <p class="dusk label">价格</p>
                <p class="value">¥<span class="number">{{coursePrice/100}}</span>起</p>
            </div>
            <div>
                <!-- <img class="car-ico" src="/static/images/car.png" alt=""> -->
                <p class="dusk label border-line">好评率</p>
                <p class="value"><span class="number">{{coachInfo.goodPercent}}</span>%</p>
            </div>
            <div>
                <!-- <i-icon type="coordinates_fill" size="15" color="#7196ef"/> -->
                <p class="dusk label">代课</p>
                <p class="value"><span class="number">{{coachInfo.lectureHour}}</span></p>
            </div>
        </div>
        <div class="chose-types" @click="switchAction">
            <span>学习科目</span>
            <span>{{currentSubject}}<i-icon type="enter" size="20"/></span>
        </div>
        <coach-tab 
            :timeList="timeList" 
            :courseList="courseList"
            @handelTap="handelCourseTap"
        ></coach-tab>
        <div class="coach-evaluate-box">
            <p class="title">
                <span>评价</span>
                <span>好评 {{coachInfo.goodPercent}}%</span>
            </p>
            <coach-evaluate :coachEvaluates="coachEvaluates"></coach-evaluate>
            <p class="view-all" @tap="lookAllEvaluate">查看全部评价</p>
        </div>
        <div class="divider">
            <i-divider size="11" color="#ced0d8">全部都被你看完了</i-divider>
        </div>
        <div class="bottom-area">
            <div class="bottom-left">
                <p class="total-price">合计: <span>¥{{totalPrice/100}}</span></p>
                <p class="course-number">已选择{{selectCourse.length}}节课</p>
            </div>
            <div class="bottom-right">
                <button class="bottom-button" @click="handleClick">立即预约</button>
            </div>
        </div>
        <i-action-sheet :visible="showAction" :actions="actions" show-cancel @cancel="switchAction" @click="handleClickItem" />
    </div>
</template>

<script>
import CoachTop from "@/components/coach/CoachTop.vue";
import CoachTab from "@/components/coach/CoachCourse.vue";
import CoachEvaluate from "@/components/coach/CoachEvaluate.vue";
import { clone } from '@/utils/index'
export default {
    components: {
        CoachTop,
        CoachTab,
        CoachEvaluate
    },
    computed: {
        
    },
    data () {
        return {
            timeList: [],
            courseList: [],
            coachEvaluates: [],
            showAction: false,
            currentSubject: '科目二',
            coachInfo: null,
            actions: [
                {
                    name: '科目二'
                },
                {
                    name: '科目三'
                },
            ]
        }
    },
    onShow () {
    },
    methods: {
    }
}
</script>

<style lang="stylus" scoped>
.coach-content
    .car-info
        width: 347px;
        height: 60px;
        box-sizing border-box
        padding 10px 0
        border-radius: 4px;
        box-shadow: 1px 2px 4px 0 rgba(186, 189, 201, 0.4);
        background-color: #ffffff;
        display flex
        background #ffffff
        margin -30px auto 0
        >div
            flex 1
            text-align center
            .border-line
                border-left 1px solid #babdc9 
                border-right 1px solid #babdc9 
            .value
                color: #fca792;
                height 12px
                margin-top 3px
                .number
                    font-size: 17px;
                    font-weight: bold;
    .chose-types
        height: 42px;
        line-height 42px;
        border-radius: 4px;
        box-shadow: 1px 2px 4px 0 rgba(186, 189, 201, 0.4);
        background-color: #ffffff; 
        width 347px
        padding 0px 10px
        box-sizing border-box
        margin 10px auto
        color #3c4d6b
        display flex
        align-items center
        justify-content space-between
    .coach-evaluate-box
        width: 347px; 
        margin 0 auto 
        box-shadow: 1px 2px 4px 0 rgba(186, 189, 201, 0.4);
        background-color: #ffffff;
        padding-bottom 16px
        .title
            font-size: 14px;
            display flex
            justify-content space-between
            padding 0 10px
            height 38px
            line-height 38px
            color #3c4d6b
            border-bottom 1px solid #e6e6e6
        .view-all
            text-align center
            font-size: 13px; 
            color  #babdc9
            line-height 30px
        .coach-summary:last-child
            .evaluate-content
                border-bottom 0px !important  
    .divider
        background-color: #f3f4f9;
        padding 28px 40px 20px
        .i-divider-content
            background-color #f3f4f9;
    .bottom-area
        height 50px
        display flex
        background  #ffffff;
        justify-content space-between
        .bottom-left
            padding  10px 11px
            color #3c4d6b
            .total-price
                font-size: 15px;
                span 
                    font-weight: bold;
                    color: #ff4f48;
        .bottom-right
            .bottom-button
                color: #ffffff;
                background-color: #19c0a2 !important  
                height: 50px !important  
                width 120px
                text-align center
                border-radius 0
</style>
